<template>
  <div>
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem>处方</BreadcrumbItem>
        <BreadcrumbItem>处方检索</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
      </Breadcrumb>

      <h2 class="primary">处方检索</h2>
    </div>
    <div class="info">
      <div>
        <div class="t">
          <div class="t1">
            <div class="info-children">
              来源科室
              <Select model-value="Department" style="width: 200px">
                <Option
                  v-for="item in departmentList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>

            <div class="info-children">
              状态
              <Select v-model="model" style="width: 150px" placeholder="全部">
                <Option
                  v-for="item in stateList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
            <div class="info-children">
              <Space size="large">
                <DatePicker
                  type="datetimerange"
                  placement="bottom-end"
                  placeholder="开方时间"
                  style="width: 320px"
                />
              </Space>
            </div>
          </div>

          <div class="">
            <div class="info-children1">
              处方类型
              <Select
                v-model="model"
                style="width: 90px; padding-right: 5px"
                clearable="true"
                placeholder="全部"
              >
                <Option
                  v-for="item in stateList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              <vxe-input
                style="height: 32px; width: 260px"
                v-model="searchName"
                placeholder="请输入姓名/身份证号/手机号/处方编号"
              ></vxe-input>
              <vxe-button style="background-color: #945635; color: aliceblue"
                >搜索</vxe-button
              >
              <vxe-button style="border: 1px solid #945635; color: #945635"
                >重置</vxe-button
              >
              <vxe-button style="background-color: #945635; color: aliceblue"
                >异常处方</vxe-button
              >
            </div>
          </div>

          <div>
            <Drawer
              title="添加处方"
              v-model="xinzengvalue"
              width="1500"
              :mask-closable="false"
              :styles="styles"
            >
              <div class="m">
                <div class="info1">
                  <div class="left">
                    <Form
                      ref="formValidate"
                      :model="formValidate"
                      :rules="ruleValidate"
                      label-width="120"
                    >
                    
                      <FormItem label="患者姓名" prop="name">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请选择患者"
                        ></Input>
                      </FormItem>

                      <FormItem label="处方状态" prop="pres_status">
                        <Select
                          v-model="formValidate.city"
                          placeholder="请选择处方状态"
                        >
                          <Option value="beijing">已接方</Option>
                          <Option value="shanghai">London</Option>
                        </Select>
                      </FormItem>

                      <FormItem label="收费员" prop="toll_collector">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请选择收费员"
                        ></Input>
                      </FormItem>

                      <FormItem label="价格" prop="pres_price">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请输入价格"
                        ></Input>
                      </FormItem>
                      <FormItem label="临床诊断" prop="diagnose">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请输入价格"
                        ></Input>
                      </FormItem>
                    </Form>
                  </div>

                  <div class="center">
                    <Form
                      ref="formValidate"
                      :model="formValidate"
                      :rules="ruleValidate"
                      label-width="120"
                    >
                      <FormItem prop="open_time" label="开方时间">
                        <DatePicker
                          type="datetime"
                          placeholder="请选择开方时间"
                          v-model="formValidate.date"
                        ></DatePicker>
                      </FormItem>

                      <FormItem label="处方标识" prop="pres_tag">
                        <Select
                          v-model="formValidate.city"
                          placeholder="请选择处方标识"
                        >
                          <Option value="beijing">门诊处方</Option>
                          <Option value="shanghai">病房处方</Option>
                        </Select>
                      </FormItem>

                      <FormItem label="单据号" prop="doc_number">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请输入单据号"
                        ></Input>
                      </FormItem>

                      <FormItem label="医生" prop="ys">
                        <Select
                          v-model="formValidate.city"
                          placeholder="请选择医生"
                        >
                          <Option value="beijing">中成药部门</Option>
                          <Option value="shanghai">安保部</Option>
                        </Select>
                      </FormItem>

                      <FormItem label="医生嘱托" prop="entrust">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请输入医生嘱托"
                        ></Input>
                      </FormItem>
                    </Form>
                  </div>

                  <div class="right">
                    <Form
                      ref="formValidate"
                      :model="formValidate"
                      :rules="ruleValidate"
                      label-width="120"
                    >
                      <FormItem label="处方类型" prop="pres_type">
                        <Select
                          v-model="formValidate.city"
                          placeholder="请选择处方类型"
                        >
                          <Option value="beijing">中成药部门</Option>
                          <Option value="shanghai">安保部</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="制药方式" prop="pharmaceutical_type">
                        <Select
                          v-model="formValidate.city"
                          placeholder="请选择制药方式"
                        >
                          <Option value="beijing">中成药部门</Option>
                          <Option value="shanghai">安保部</Option>
                        </Select>
                      </FormItem>

                      <FormItem label="付数" prop="count">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请输入付数"
                        ></Input>
                      </FormItem>

                      <FormItem label="来源科室" prop="lyks">
                        <Select
                          v-model="formValidate.city"
                          placeholder="请选择来源科室"
                        >
                          <Option value="beijing">中成药部门</Option>
                          <Option value="shanghai">安保部</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="禁忌药品说明" prop="forbid">
                        <Input
                          v-model="formValidate.name"
                          placeholder="请输入禁忌药品说明"
                        ></Input>
                      </FormItem>
                    </Form>
                  </div>
                </div>
                <div>
                  <vxetable />
                </div>
              </div>

              <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="xinzengvalue = false"
                  >取消</Button
                >
                <Button type="primary" @click="xinzengvalue = false"
                  >保存</Button
                >
              </div>
            </Drawer>
          </div>
        </div>

        <vxe-grid v-bind="gridOptions">
          <template #toolbar_buttons>
            <vxe-button
              @click="xinzengvalue = true"
              style="background-color: #945635; color: aliceblue; width: 110px"
              >+ 补增处方</vxe-button
            >

            <vxe-button
              style="width: 110px; border: 1px solid #945635; color: #945635"
              >合方</vxe-button
            >
          </template>
        </vxe-grid>
      </div>
    </div>
  </div>
</template>

<script setup>
import vxetable from "../../../../components/vxetable.vue";
import { api_get_cfInfo } from "../../../../api/chufang/chufang/chufang";
import { ref, onMounted } from "vue";
const findPageList = (currentPage, pageSize) => {
  return new Promise(resolve => {
    setTimeout(() => {
      const list = tabList
      resolve({
        page: {
          total: list.length
        },
        result: list.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      })
    }, 100)
  })
}
const searchName = ref("");
const xinzengvalue = ref(false) ;
const tabList=ref({})
const getCfInfo = () => {
  api_get_cfInfo()
    .then((res) => {
      tabList.value=res.data.data.list
    console.log(tabList.value,'tabList.value');
    })
    .catch((err) => {
    console.log(err);
  })
}
onMounted(() => {
  getCfInfo()
})
const formValidate = {
  name: "",
  url: "",
  owner: "",
  type: "",
  approver: "",
  date: "",
  desc: "",
};
const stateList = [
  {
    label: "已接方",
  },
  {
    label: "已调剂",
  },
  {
    label: "已复核",
  },
  {
    label: "已调度",
  },
  {
    label: "制作中",
  },
  {
    label: "已封装",
  },
];
const departmentList = [
  {
    label: "中成药部门",
  },
  {
    label: "安保部",
  },
];
const gridOptions = ref({
  border: true,

  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
    slots: {
      operate: "operate",
    },
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  proxyConfig: {
    seq: true,
    props: {
      result: 'result',
      total: 'page.total'
    },
    ajax: {
      // 接收 Promise
      query: ({ page }) => {
        return findPageList(page.currentPage, page.pageSize)
      }
    }
  },

  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "pres_id", title: "序号", width: 70, align: "center" },
    { field: "patient_name", title: "患者姓名", width: 184 },
    { field: "pres_id", title: "处方编号", width: 180 },
    { field: "diagnose", title: "临床诊断" },
    { field: "source_dep_name", title: "科室", width: 100, align: "center" },
    { field: "pres_status", title: "状态", width: 120, align: "center" },
    { field: "Interventions", title: "干预情况", width: 120, align: "center" },
    { field: "open_time", title: "日期", width: 180, align: "center" },
    { field: "operate", title: "操作", width: 130, align: "center" },
  ],

  data: tabList
});
</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}

.primary {
  color: #945635;
}

h2 {
  font-weight: normal;
  font-size: 20px;
}
.t {
  display: flex;
  flex-direction: column;
}
.t1 {
  display: flex;
}
.info-children {
  padding-right: 10px;
  padding-bottom: 10px;
}
.info-children1 {
  padding-right: 10px;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.info1 {
  display: flex;
}
.left {
  flex: 1;
}
.center {
  flex: 1;
}
.right {
  flex: 1;
}
.m {
  display: flex;
  flex-direction: column;
}
</style>